<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听器的使用</title>
    <script src="/js/vue.js"></script>
</head>

<body>
    <div id ="app">
        <p>{{value}}</p>
        <button @click="value++">button</button>

        <p>{{price}}</p>
        <button @click="priceChange()">button</button>
        <p>比原价贵了{{expensive}}元</p>
    </div>

    <script>
     let app = new Vue({
        el: '#app',
        data: {
            msg:'hello world',
            value:100,
            price:100,
            expensive:0,
            name:"Shane",
            hobbies:['篮球','排球','羽毛球'],
            obj:{
                name:'shane',
                age:12,
                gender:'男'
            }
        },
        methods:{
            priceChange(){
                this.price += 10
            }
        },
        computed:{
            total(){
                return this.price+this.value
            }
        },
        watch: {
            value(newValue,oldValue){   
                console.log("value被改变了。");
                console.log("old",oldValue);
                console.log("new",newValue);
            },
            price(newValue,oldValue){   
                this.expensive = newValue - oldValue
            },
            name(){
                console.log("字符串发送改变");
            },
            hobbies(){
                console.log("数组发生变化");
            },

            obj:{   
                deep :true,
                handler(newValue,oldValue){
                    console.log("对象发生变化");
                },
                immediate:false 
            },
            total(){   
                console.log("计算属性发生改变");
            }
        }
     });
    </script>
</body>

</html>